<template>
	<el-card>
		<el-row>
			<div>发送命令</div>
			<el-input v-model="monitorCommand" type="textarea" :rows="3" placeholder="输入全部命令" class="textarea"></el-input>
			<el-button style="float:right;margin:20px 5px 0 0" type="primary" @click="send">点击发送</el-button>
			</el-row>
			<div>接收命令</div>
			<el-card style="height:300px;overflow:auto">
				<div v-for="(item,index) in resData" :key="index"><json-viewer :value="item"></json-viewer></div>
			</el-card>
			<!-- <json-viewer :value="resData"></json-viewer> -->
			
	</el-card>
</template>
<script>
export default {
	data () {
        return {
            path:"wss://tcp-client.test.senthink.com",
			socket:"",
			monitorCommand: '',
			resData: []
        }
    },
    mounted () {
        this.init()
    },
    methods: {
        init() {
            if(typeof(WebSocket) === "undefined"){
                alert("您的浏览器不支持socket")
            }else{
                // 实例化socket
                this.socket = new WebSocket(this.path)
                // 监听socket连接
                this.socket.onopen = this.open
                // 监听socket错误信息
                this.socket.onerror = this.error
                // 监听socket消息
                this.socket.onmessage = this.getMessage
            }
        },
        open() {
            console.log("socket连接成功")
        },
        error() {
            console.log("连接错误")
        },
        getMessage(msg) {
			this.resData.push(msg.data)
        },
        send() {
            this.socket.send(this.monitorCommand)
        },
        close() {
            console.log("socket已经关闭")
        }
    },
    destroyed () {
        // 销毁监听
        this.socket.onclose = this.close
    }
};
</script>


<style>
.textarea{
    margin-top: 20px;
}
.sendCard {
  height: 50vw;
  text-align: left;
  margin-right: 10px;
}
.reciveCard {
  height: 50vw;
  text-align: left;
}
.sendBody{
    margin-top: 10px;
    height: 36vw;
}
.reciveBody{
    margin-top: 20px;
    height: 30vw;
}
</style>
